<template>
	<view class="transfer-result-wrapper" v-if="detail!==''">
		<div class="result-wrapper">
			<div class="result">转赠成功</div>
			<div class="money">
				<span class="text">焕贝</span>
				<span class="money">{{detail.transferMoney}}</span>
				<span class="fee">手续费{{detail.commission}}</span>
			</div>
		</div>
		<div class="list-wrapper">
			<div class="item-wrapper border-bottom">
				<div class="name">收款人</div>
				<div class="right">
					<div class="phone">{{detail.payeePhone}}</div>
					<div class="name">{{detail.payeeName}} {{detail.payeeCard||''}}</div>
				</div>
			</div>
			<div class="item-wrapper border-bottom">
				<div class="name">转赠钱包</div>
				<div class="right">
					<div class="name">{{detail.paymentWallet}}</div>
				</div>
			</div>
			<div class="item-wrapper border-bottom">
				<div class="name">转赠时间</div>
				<div class="right">
					<div class="name">{{detail.paymentTime}}</div>
				</div>
			</div>
			<div class="item-wrapper">
				<div class="name">流水号</div>
				<div class="right">
					<div class="name">{{detail.sn}}</div>
				</div>
			</div>
		</div>
		<div class="button-wrapper">
			<button class="button" @click="toTransferHistory">转赠记录</button>
		</div>
	</view>
</template>

<script>
	import {
		TransferDetail
	} from "@/api/members.js"
	import BigNumber from 'bignumber.js'
	const WalletType = {
		'SALE': '销售钱包',
		'PROMOTE_FW': '推广钱包-服务费',
		'PROMOTE_HY': '推广钱包-会员费',
		'PROMOTE': '推广钱包',
	}
	export default {
		name: 'transfer-result',
		data() {
			return {
				detail: ''
			}
		},
		onLoad(option) {
			this.init(option.sn)
		},
		methods: {
			init(sn) {
				TransferDetail(sn).then((res) => {
					console.log(res)
					let result = res.data.result
					if (result.payeeCard === '1') {
						result.gradeName = '银卡会员'
					}
					if (result.payeeCard === '2') {
						result.gradeName = '金卡会员'
					}
					let wallet = result.paymentWallet.split(',')
					wallet = wallet.map((item) => {
						return WalletType[item]
					})
					this.detail = {
						transferMoney: result.transferMoney,
						commission: new BigNumber(result.commission).dp(2, BigNumber.ROUND_DOWN).toNumber(),
						paymentTime: result.paymentTime,
						payeeName: result.payeeName,
						payeePhone: result.payeePhone,
						payeeCard: result.gradeName,
						paymentWallet: wallet.join(','),
						sn: result.sn,
					}
				})
			},
			toTransferHistory() {
				uni.navigateTo({
					url: "/pages/partner/transfer-accounts/transfer-history"
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.transfer-result-wrapper {
		.result-wrapper {
			margin-top: 24upx;
			padding: 100upx 0 100upx 0;
			background-color: #ffffff;

			.result {
				font-size: 32upx;
				color: #3640ff;
				text-align: center;
			}

			.money {
				margin-top: 12upx;
				display: flex;
				justify-content: center;
				align-items: flex-end;
				color: #ff9838;

				.text {
					font-size: 24upx;
				}

				.money {
					font-size: 48upx;
					font-weight: bold;
				}

				.fee {
					margin-left: 24upx;
					font-size: 24upx;
				}
			}
		}

		.list-wrapper {
			margin-top: 24upx;
			padding: 0 32upx;
			background-color: #ffffff;

			.item-wrapper {
				display: flex;
				justify-content: space-between;
				align-items: center;
				padding: 32upx 0;
				text-align: right;
				color: #9c9c9c;

				.name {
					font-size: #666666;
					font-size: 28upx;
				}

				.phone {
					font-size: 32upx;
					color: #222222;
					margin-bottom: 8upx;
				}

			}

			.border-bottom {
				border-bottom: 2upx solid #f2f2f2;
			}
		}

		.button-wrapper {
			margin-top: 100upx;
			text-align: center;

			.button {
				width: 320upx;
				height: 80upx;
				line-height: 80upx;
				background: linear-gradient(162.65deg, rgba(0, 162, 255, 1) 0%, rgba(22, 111, 219, 0.65) 100%);
				border-radius: 40upx;
				color: #ffffff;
				font-size: 28upx;
			}
		}
	}
</style>
